<template>
    <div>
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item  v-for="(items,index) in this.stageamount"  :key="index"  >
          <template slot="title">
            第{{items}}阶段
          </template>
          <el-carousel type="card" height="373px" :autoplay="false" >
            <el-carousel-item v-for="(item,key) in stage" :key="item.id" v-if="item.stagequeue==index+1" >
            <videoCard :src=item.videoaddress ></videoCard>
              <div class="title-box">{{ item.stagename }}  </div>
            </el-carousel-item>
          </el-carousel>
        </el-collapse-item>
      </el-collapse>
    </div>
</template>

<script>
    import videoCard from "./video";

    export default {
        name: "CourseStage",
      props:{
          courseid:Number,
        stageamount:Number
      },
      components:{
        videoCard:videoCard
      },
      data () {
        return {
                stage:[],
                stagen:0


        }
      },

      created() {
        var url = '/stage/'+this.courseid;
        // stage/1

        this.$axios.get(url)
          .then( (res)=> {
            //document.write("data is coming", res.data.code);
            if (res.data.code === 200) {
              for(var i=0;i<res.data.data.length;i++) {
                let row = {}; // 定义一个当前添加数据的行
                row.id = res.data.data[i].id;
                row.stagename = res.data.data[i].stagename;
                row.stagequeue = res.data.data[i].stagequeue;
                row.videoaddress = res.data.data[i].videoaddress;

                this.stage.push(row);
              }
              sessionStorage.setItem('stage',JSON.stringify(this.stage));

            }
            else {
              this.$message({message: this.res.data, type: 'error'})
            }
          }).catch(function (error) {
          console.log(error);
        } );
      }



    }
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .title-box{
    margin:30px auto;
    background: white;
    font-size: 18px;
    color: #333333;

  }

</style>
